<template>
    <div>
      <div class="fixed-bar">
      <mu-appbar>
        <mu-toast v-if="toast" class="demo-toast" message="开发中" @close="hideToast"/>
        <mu-icon-button icon="menu" slot="left"  @click="toggle(true)" />
        <div class="logo" slot="left"  style="margin-left:20px;"></div>
        <mu-icon-button icon='search'  @click="showToast('开发中')"  slot="right"/> 
      </mu-appbar>
      <mu-tabs :value="activeTab" @change="handleTabChange" class="view-tabs">
        <mu-tab value="rage" title="精选"/>
        <mu-tab value="songList" title="歌单"/>
        <mu-tab value="leaderBoard" title="排行榜"/>
        <mu-tab value="hotSinger" title="热门歌手"/>

      </mu-tabs>
      </div>
      <div class="default-view" :class="{view: songList.length > 0}">
        <keep-alive>
         <router-view></router-view>
        </keep-alive>
      </div>
        

    <mu-drawer :open="open" :docked="docked"  @close="toggle()"  >
       <mu-appbar   title="新感官世界"/>

      <mu-list>
        
        <mu-list-item title="" disabled style=" " >
          <mu-avatar class="mu-paper demo-paper mu-paper-circle mu-paper-round mu-paper-2"  src="https://p1.music.126.net/1cljZ6TXUK8pkBE7kr41rw==/3117115464787719.jpg?param=50y50" :size="50"/>
        </mu-list-item>
        
      </mu-list>
      <mu-menu class="demo-menu-divider" @itemClick="docked ? '' : toggle()">
        <mu-menu-item title="设置" leftIcon="settings"/>
        <mu-menu-item title="帮助" leftIcon="help_outline"/>
        <mu-menu-item title="设置" leftIcon="settings"/>
        <mu-menu-item title="帮助" leftIcon="help_outline"/>
        <mu-divider />
        <mu-menu-item title="退出" leftIcon="power_settings_new"/>
      </mu-menu>

      </mu-list>  
    </mu-drawer> 

    </div>
  
</template>
<script>
  import { mapGetters } from 'vuex' 
 
  export default {
    data () {
      return {
        
        open: false,
        docked: true,
        toast: false,
      }
    },
    created () {
      // 当created函数时监测路由信息,防止页面刷新tab高亮错误
      var tmpArr = this.$route.path.split('/')
      if (tmpArr[1] === 'index') {
        this.handleTabChange(tmpArr[2])
      }
    },
    // watch函数监测路由的变化,保持tab面板的高亮位置正确
    watch: {
      '$route' (to, from) {
        const path = to.path
        var tmpArr = path.split('/')
        if (tmpArr[1] === 'index') {
          this.handleTabChange(tmpArr[2])
        }
      }
    },
    methods: {
      handleTabChange (val) {
        this.activeTab = val
        this.$router.push({ path: '/index/' + val })
      },
       toggle (flag) {
        this.open = !this.open
        this.docked = !flag
      },
       showToast () {
      this.toast = true
      if (this.toastTimer) clearTimeout(this.toastTimer)
      this.toastTimer = setTimeout(() => { this.toast = false }, 2000)
      },
      hideToast () {
        this.toast = false
        if (this.toastTimer) clearTimeout(this.toastTimer)
      }
    },
    computed: {
      ...mapGetters([
        'songList'
      ])
    },
    props:{
      actionColor:'red'
    }
  }
</script>
<style lang="less" scoped>
  @import "../assets/theme.less";

    .demo-toast{
       position: fixed;
            z-index: 2000;
            left: 50%;
            top:45%;
            transition:all .5s;
            -webkit-transform: translateX(-50%) translateY(-50%);
               -moz-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                 -o-transform: translateX(-50%) translateY(-50%);
                    transform: translateX(-50%) translateY(-50%);
            text-align: center;
            border-radius: 5px;
            color:#FFF;
            background: rgba(17, 17, 17, 0.7);
            height: 45px;
            line-height: 45px;
            padding: 0 15px;
            max-width: 150px;
  
    }
  .logo {
    width: 110px;
    height: 40px;
    background: url("../../static/logo.png") no-repeat left center;
    background-size: cover;
  }
  .view-tabs {
    background-color: #fff;
    color: rgba(0,0,0,.87);
    >.mu-tab-link {
      color: rgba(102,102,102,1);
    }
    >.mu-tab-active{
      color: @primaryColor;
    }
  }

  .fixed-bar {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    z-index: 15;
  }
  .default-view {
    margin-top: 104px;
  }
  .view {
    margin-bottom: 2.3rem;
  }
    

</style>
